<template>
  <div class="order app-container">
    <div class="order_no">
      订单编号：
      <el-input
        v-model="order_no"
        placeholder="订单号搜索"
        prefix-icon="el-icon-search"
        :clearable="true"
        style="width: 200px;"
        @change="searchOrder"
      />
    </div>
    <el-table
      :data="tableData"
      border
      style="width: 100%; margin-bottom: 20px"
    >
      <el-table-column
        prop="order_on"
        label="订单编号"
        align="center"
        width="200"
      />
      <el-table-column
        prop="userInfo.username"
        label="用户名"
        align="center"
        width="100"
      />
      <el-table-column
        prop="create_time"
        width="160"
        :sortable="true"
        align="center"
        label="订单日期"
      >
        <template slot-scope="scope">
          <div>{{ $util.handleDate(scope.row.create_time, 'YYYY-MM-DD HH:mm:ss') }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="price"
        width="120"
        align="center"
        :sortable="true"
        label="订单金额"
      >
        <template slot-scope="scope">
          {{ scope.row.price | handlePrice }}
        </template>
      </el-table-column>
      <el-table-column
        prop="num"
        align="center"
        label="订单种类"
      />
      <el-table-column
        prop="status"
        :sortable="true"
        align="center"
        label="订单状态"
      >
        <template slot-scope="scope">
          {{ scope.row.status === 1 ? '已付款' : '代付款' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="userInfo.phone"
        align="center"
        label="电话号码"
      />
      <el-table-column
        prop="addr"
        label="收货地址"
      />
      <el-table-column
        label="操作"
        align="center"
        width="100"
      >
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleClick(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page.sync="currentPage1"
      :page-size="100"
      layout="prev, pager, next, jumper"
      :total="1000"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
export default {
  name: 'OrderList',
  data() {
    return {
      tableData: [],
      limit: 6,
      page: 1,
      order_no: '',
      currentPage1: 1,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4
    }
  },
  created() {
    this.init()
  },
  mounted() {
    this.$io.on('sendOrders', msg => {
      console.log(msg)
      this.tableData.unshift(msg.data[0])
    })
  },
  methods: {
    init() {
      const obj = {
        order_on: this.order_no,
        page: this.page,
        limit: this.limit
      }
      console.log(obj)
      this.$goodsApi.fetchShopOrder(obj).then(res => {
        console.log(res)
        this.tableData = res.data
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.page = val
      this.init()
    },
    handleClick(scope) {
      this.tableData.splice(scope.$index, 1)
      this.$goodsApi.fetchDelOrder({ _id: scope.row._id }).then(res => {
        console.log(res)
        this.$message({ type: 'success', message: res.msg })
      })
      console.log(scope)
    },
    searchOrder() {
      console.log(this.order_no)
      this.init()
    }
  }
}
</script>

<style scoped lang="scss">
.order_no {
  margin-bottom: 20px;
}
</style>
